<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Credit Asset Manager by VinkDong</title>
    <link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/model.css">
</head>
<body>
<div class="container" id="app">
    <img src="../static/img/logo.png" class="col-sm-6">
    <h1 class="modal-title text-center col-sm-6 media-middle" style="line-height: 156px;">{{title}}</h1>
    <table class="table">
        <thead>
        <tr>
            <th>#</th>
            <th>Bank</th>
            <th>Credit</th>
            <th>Balance</th>
            <th>Debit</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in credits" @click="itemClick(item)">
            <td><img v-bind:src="item.icon"></td>
            <td>{{item.name}}</td>
            <td>{{item.credit | formatMoney}}</td>
            <td>{{item.credit - item.debit | formatMoney}}</td>
            <td>{{item.debit | money('¥')}}</td>
        </tr>
        </tbody>
    </table>
    <div class="text-center">
        <a class="btn--m btn" v-bind:href="context.pages.add_item_page">Add New</a>
        <a class="btn--m btn" v-bind:href="context.pages.view_bill_page">View Bill</a>
    </div>
    <div id="showModal" class="md-modal modal-msg md-modal-transition" v-bind:class="{'md-show':editing}">
        <div class="md-modal-inner">
            <div class="md-top">
                <button class="md-close" @click="modelClose">关闭</button>
            </div>
            <div class="md-content">
                <div class="confirm-tips">
                    <p id="cusLanInfo">Now you're edit <strong>{{curItem.name}}</strong></p>
                    <form class="form-horizontal">
                        <div class="form-group has-success has-feedback">
                            <label class="control-label col-sm-4 btn--m" for="bank-name" style="font-size: 23px">Amount</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control btn--m" id="bank-name"  v-model="change_amount">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="btn-wrap col-2">
                    <button id="btnModalConfirm" class="btn btn--m" @click="addRecord('out')">Consume</button>
                    <button id="btnModalCancel" class="btn btn--m btn--red" @click="addRecord('in')">Repayment</button>
                </div>
            </div>
        </div>
    </div>
    <div class="md-overlay" v-if="editing" @click="modelClose"></div>
</div>
<script src="../node_modules/vue/dist/vue.min.js"></script>
<script src="../node_modules/vue-resource/dist/vue-resource.min.js"></script>
<script src="../static/js/asset.js"></script>
</body>
</html>